<template>
	<div class="role">
		<pageHeader :form-data-config="formDataConfig">
			<template #footer>
				<div class="footer">
					<el-button :icon="Refresh" type="info">重置</el-button>
					<el-button :icon="Search" type="primary">搜索</el-button>
				</div>
			</template>
		</pageHeader>
		<pageContent page-name="role" :content-data-config="contentDataConfig" @click-edit="handleEdit">
			<template #headerHandler>
				<div class="header-handler">
					<el-button type="primary" @click="handleCreate">新建角色</el-button>
					<el-button :icon="Refresh"></el-button>
				</div>
			</template>
		</pageContent>
		<pageModel
			ref="modelRef"
			page-name="role"
			:model-config="modelDataConfig"
			:default-value="defaultValue"
			:other-options="otherOptions"
		>
			<el-tree
				ref="treeRef"
				:data="menus"
				show-checkbox
				node-key="id"
				highlight-current
				:props="{ children: 'children', label: 'name' }"
				@check="checkChange"
			/>
		</pageModel>
	</div>
</template>

<script lang="ts" setup>
import pageContent from "@/components/PageContent/pageContent.vue"
import pageHeader from "@/components/pageHeader/index.vue"
import pageModel from "@/components/pageModel/pageModel.vue"
import { formDataConfig } from "./config/formDataConfig"
import { contentDataConfig } from "./config/contentDataConfig"
import { modelDataConfig } from "./config/modelDataConfig"
import { Refresh, Search } from "@element-plus/icons-vue"
import useModelMethods from "@/hooks/useModelMethods"
import globeStore from "@/store/globe"
import { ElTree } from "element-plus"

import { computed, nextTick, ref } from "vue"
import { menuMapLeafKeys } from "@/utils/mapRouteToMenu"

const treeRef = ref<InstanceType<typeof ElTree>>()
const clickEdit = (item: any) => {
	const leafKeys = menuMapLeafKeys(item.menuList)
	nextTick(() => {
		if (leafKeys) {
			treeRef.value?.setCheckedKeys(leafKeys, true)
		}
	})
}
const { modelRef, defaultValue, handleCreate, handleEdit } = useModelMethods(undefined, clickEdit)
const useMain = globeStore()
const menus = computed(() => useMain.entireMenu)
const otherOptions = ref({})
const checkChange = (_: any, data2: any) => {
	console.log("data2", data2)

	const menuList = [...data2.checkedKeys, ...data2.halfCheckedKeys]
	otherOptions.value = { menuList }
}
</script>

<style lang="less" scoped></style>
